<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小鹿线-毕业学员</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/Normalize.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/student.css">

</head>

<body>
    <div class="container">
        <header>
            <div class="h-title">
                <div class="h-return">
                    <i class="iconfont icon-arrow_left_fat"></i>
                </div>
                <div class="h-stu">
                    毕业学员
                </div>
            </div>
            <div class="selected">
                <select name="" id="salary">
                    <option >薪资</option>
                    <option >1k~5k</option>
                    <option >5k~8k</option>
                    <option>8k~11k</option>
                    <option >11k~15k</option>
                    <option>15k~25k</option>
                </select>
                <select name="" id="age">
                    <option>年龄</option>
                    <option>16~18</option>
                    <option>18~22</option>
                    <option>22~26</option>
                    <option >26~30</option>
                    <option>30~35</option>
                </select>
            </div>
        </header>

        <section>
            <ul>
               
            </ul>
        </section>
    </div>
    <script src="./js/zepto.min.js"></script>
    <script src="./js/touch.js"></script>
    <script src="./js/swiper-bundle.min.js"></script>
    <script src="./js/flexible.js"></script>
    <script src="./js/lazyload.min.js"></script>
    <script>
        $(function () {
            var result = '';
            var pages = 1;
            var parentId = '';
            // 跳转上一页
            $('.icon-arrow_left_fat').click(function () {
                window.history.go(-1);

            })
            
            // 点击空白处收起键盘
            window.addEventListener('touchstart',function () {
                document.activeElement.blur();
              },false)
            fAjax(1,null,null,null,null)
            // 请求数据
            function fAjax(pages,minSalary,maxSalary,minAge,maxAge) {
				$.ajax({
					url: `http://39.101.217.150:8075/jobs/list`,
					type: 'get',
					data: {
						page:pages,
						size:12,
						salary1:minSalary,
						salary2:maxSalary,
						age1:minAge,
						age2:maxAge,
					},
					success: function (res) {
						let records = res.data.records;
						$.each(records, function (index, item) {
							result += `
                            <li >
                                <div class="student-img">

                                    <img data-original="${item.imgurl}" src='./img/loading.jpg' alt="学员">
                                </div>
                                <div class="student-text">
                                    <p>姓名：${item.name}</p>
                                    <p>年龄：${item.age}</p>
                                    <p>学历：${item.education}</p>
                                    <p>城市：${item.city}</p>
                                    <p>薪资：${item.salary}</p>
                
                                </div>
                            </li>
							`
						})
                        // 懒加载
						$('section ul').html(result);
                        $('section ul li img').lazyload({
                            container:$('section')
                        })
					}

				})
			}
        
        
            // 切换数据
            $('#salary,#age').change(function () {
				result = ``;
				// 最小值和最大值
				pages = 1;// 重置page
				var arr = $(this).val().split('~')
				minStr = parseInt(arr[0])
				maxStr = parseInt(arr[1])
				parentId = $(this).attr('id')
				// 得到对应的父元素
				if(parentId == 'salary'){
					// 点击的是薪资
					fAjax(pages,minStr,maxStr,null,null)
				}else{
					fAjax(pages,null,null,minStr,maxStr);

				}

			    })

        })
    </script>
</body>

</html>